<template>
  <view :style="[styles]" class="content">
    <text class="title" :style="{ color: attribute.titleColor }">{{
      attribute.title
    }}</text>
    <span class="red-dot" v-if="attribute.required">*</span>
    <view class="img-area">
      <view class="img-bd">
        <view
          v-for="(item, index) in fileList"
          @click="handleImgPreview(index)"
          class="img-item"
          :key="$u.guid()"
        >
          <image class="img" :src="item" mode="aspectFill" />
          <view class="close-icon" @click.stop="delSelectImg(index)">
            <u-icon name="close" color="#fff" size="10" />
          </view>
        </view>
        <view
          class="img-item"
          @click="handleImgClick"
          v-if="fileList.length !== attribute.count"
        >
          <u-icon name="plus" color="#DDDDDD" size="34"></u-icon>
        </view>
      </view>
      <view class="input-rule-text" v-if="requiredFail">{{
        attribute.requiredText
      }}</view>
      <view class="tips">
        <u--text :text="attribute.tipsText" size="13" lineHeight="18"></u--text>
      </view>
    </view>
  </view>
</template>

<script>
import { COMPREIFX } from "../../../libs/const/widget";

export default {
  name: `${COMPREIFX}cus-img-upload`,
  props: {
    attribute: Object,
    styles: Object,
  },
  computed: {
    fileList() {
      return this.attribute.value;
    },
  },
  data() {
    return {
      requiredFail: false,
    };
  },
  methods: {
    validate() {
      return new Promise((resolve) => {
        if (this.attribute.required && !this.fileList.length) {
          resolve(this.attribute.requiredText);
          this.requiredFail = true;
          return;
        }
        resolve();
      });
    },
    handleImgClick() {
      uni.chooseImage({
        count: this.attribute.count - this.fileList.length,
        sizeType: ["compressed"],
        sourceType: this.attribute.sourceType,
        extension: ["png", "jpg", "gif"],
        success: (res) => {
          const { errMsg, tempFiles } = res;
          if (errMsg === "chooseImage:ok") {
            if (this.attribute.showLoading) {
              uni.showLoading({
                title: "上传中",
              });
            }
            let tempFilesCount = tempFiles.length;
            tempFiles.forEach((item) => {
              this.$widget[this.attribute.api.upload](item).then((res) => {
                tempFilesCount = tempFilesCount - 1;
                const { baseUrl, path } = res;
                const imgSrc = baseUrl + path;
                this.attribute.value.push(imgSrc);
                this.requiredFail = false;
                if (tempFilesCount === 0) {
                  uni.hideLoading();
                }
              });
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            icon: "none",
            title: JSON.stringify(err),
          });
        },
      });
    },
    handleImgPreview(idx) {
      uni.previewImage({
        urls: this.fileList,
        current: idx,
        indicator: "number",
      });
    },
    delSelectImg(idx) {
      const resultArr = this.attribute.value.filter(
        (item, _idx) => idx !== _idx
      );
      this.attribute.value = resultArr;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 15rpx 20rpx;

  .title {
    color: #333;
    font-size: 28rpx;
  }

  .red-dot {
    color: rgb(245, 39, 39);
    margin-left: 5rpx;
  }

  .img-area {
    margin-top: 22rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;

    .img-bd {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;

      .img-item {
        position: relative;
        width: 200rpx;
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f3f3f3;
        margin-bottom: 22rpx;
        margin-right: 30rpx;

        .img {
          width: 100%;
          height: 100%;
          overflow: hidden;
        }

        .close-icon {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: -10rpx;
          right: -10rpx;
          width: 38rpx;
          height: 38rpx;
          border-radius: 38rpx;
          background-color: rgb(174, 174, 174);
        }
      }
    }

    .input-rule-text {
      width: 100%;
      color: #f05357;
      font-size: 24rpx;
      padding: 15rpx 18rpx;
    }
  }
}
</style>
